<script setup lang="ts">
import { inject, ref } from 'vue'
import { MenuType } from '@/views/desktop/type'
import MyDialog from '@/assets/components/Dialog.vue'
import { getBingList } from '@/api/desktop/WallpaperApi'
import type { WallPaper } from '@/views/desktop/type'
import { updateUserConfig } from '@/api/desktop/UserApi'

const props = defineProps({ menu: MenuType })
let userConfig = inject('userConfig')
let fullScreen = ref(false)
let width = ref('50%')

const cancel = () => {}
const setFullScreen = () => {
  fullScreen.value = !fullScreen.value
}

let wallpaperList = ref<WallPaper[]>([])
getBingList().then((res) => {
  wallpaperList.value = res
})
const setWallPaper = (item) => {
  userConfig.value.backgroundImg = item.url

  updateUserConfig(userConfig.value)
}
const getWallPaper = (item) => `/bing${item.url}`
</script>

<template>
  <my-dialog
    :full-screen="fullScreen"
    @setFullScreen="setFullScreen"
    :menu="props.menu"
    :width="width"
    :title="'壁纸设置'"
  >
    <div class="overflow-y-auto grid grid-cols-4 gap-4">
      <div
        v-for="item in wallpaperList"
        class="col-span-1"
        @click="setWallPaper(item)"
      >
        <img :src="getWallPaper(item)" :alt="item.title" />
      </div>
    </div>
  </my-dialog>
</template>

<style scoped></style>
